<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="./img/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/programme_dail.css">
    <title>解决方案详情</title>
</head>
<body>
    <header>
        <div class="claerFlex">
            <div class="left_box">
                <img src="./img/u160.png" alt="">
                <h3 class="margin_10 font_24">LOGO</h3>
            </div>
            <div class="right_box">
                <ul class="listStyle">
                    <li><a href="./index.html" >企业主页</a></li>
                    <li><a href="./product.html ">产品</a></li>
                    <li><a href="./programme.html" class="active">解决方案</a></li>
                    <li><a href="./customer.html">客户案列</a></li>
                    <li><a href="./consult.html">咨询与服务</a></li>
                    <li><a href="./news.html">企业新闻</a></li>
                    <li><a href="./join.html">加入我们</a></li>
                </ul>
            </div>
        </div>
    </header>
    <div class="tag_btn">
       <p class="font_20">联系我们</p>
    </div>
    <div style="padding-top: 100px;"></div>
    <main>
        <div class="banner">
            <img src="./img/u840.png" alt="">
             <div>
                <p class="font_30">智慧交通可视化解决方案</p>
                <h3 class="font_33">打破交通行业信息孤岛</h3>
                <a class="font_24 font_white" href="#">方案咨询</a>
             </div>
        </div>
        <div class="tab_box">
            <div class="container">
                <ul class="tab_list">
                    
                </ul>
            </div>
        </div>
        <div class="industry">
            <div class="container">
                <!-- <p class="font_33">行业痛点</p> -->
                <!-- <ul>
                    <li>
                        <img src="./img/u879.png" alt="">
                        <p class="font_30">信息孤岛 运维效率低</p>
                        <p class="font_20 font_black">这是一段产品优势示例：公交，地铁，铁路，空运，各个系统相互独立，信息传递及运输效率降低，信息孤岛现象严重，公交，地铁，铁路，空运，各个系统相互独立，信息传递及运输效率降低，信息孤岛现象严重。</p>
                    </li>
                    <li>
                        <img src="./img/u881.png" alt="">
                        <p class="font_30">设备数量庞大</p>
                        <p class="font_20 font_black">这是一段产品优势示例：随着交通建设的发展，涉及的里程、站点数飞速增涨，需要管理的设备繁杂，维护成本高。</p>
                    </li>
                    <li>
                        <img src="./img/u884.png" alt="">
                        <p class="font_30">信息数据分散</p>
                        <p class="font_20 font_black">这是一段产品优势示例：交通的系统应用多，数据分散，不能在同一个平台展示，难以基于数据实现正确决策。</p>
                    </li>
                    <li>
                        <img src="./img/u887.png" alt="">
                        <p class="font_30">缺乏应急联动</p>
                        <p class="font_20 font_black">这是一段产品优势示例：出现告警事件时，各系统间没有形成快速联动。</p>
                    </li>
                </ul> -->
            </div>
        </div>
        <div class="advantage">
            <div class="container">
                <!-- <p class="font_33">方案优势</p> -->
                <!-- <ul>
                    <li>
                        <img src="./img/u433.png" alt=""s>
                        <p class="font_30">灵活部署</p>
                        <p class="font_20 font_black">这是一段方案优势示例：全面适配各种底层存储计算平台，支持容器化部署，零基础半小时轻松完成全套产品部署。</p>
                    </li>
                    <li>
                        <img src="./img/u437.png" alt="">
                        <p class="font_30">高安全性</p>
                        <p class="font_20 font_black">这是一段产品优势示例：平台部署在内网服务器上，抗外部攻击能力强。</p>
                    </li>
                    <li>
                        <img src="./img/u443.png" alt="">
                        <p class="font_30">算法先进</p>
                        <p class="font_20 font_black">这是一段产品优势示例：1.5亿+数据样本训练，可通过网络升级算法，有效识别率达99.99%以上。</p>
                    </li>
                    <li>
                        <img src="./img/u447.png" alt="">
                        <p class="font_30">高稳定性</p>
                        <p class="font_20 font_black">这是一段产品优势示例：7*24小时稳定运行，稳定性高达99.99%。</p>
                    </li>
                </ul> -->
            </div>
        </div>
        <div class="framework">
            <div class="container">
                <!-- <p class="font_33">方案架构</p> -->
                <!-- <ul>
                    <li class="font_20 font_black">
                        <p>这是一段架构描述示例：智慧交通将是智能的立体化架构，如图所示，包括终端层、网络层平台层及应用层。终端层，即基础设施层，是智慧交通的神经末梢，实现道路的全面感知与检测，同时实现感知数据的结构化处理；网络层，是基础设施层与平台应用层连接的管道，一方面将基础设施的结构化数据上传到平台层；另一方面，根据不同的业务需求提供隔离的网络资源。平台层，是智慧交通的大脑，实现车辆、路侧感知信息的采集与融合分析，面向不同应用场景提供联合决策和协同控制，实现业务管理及应用服务。应用层，实现路况监测、编队行驶、无人驾驶等智慧交通服务。通过“端-管-云”的架构，实现地面交通在云端的数字孪生映射，利用人工智能实现快速、高效的智慧交通业务应用</p>
                        <img src="./img/u890.png" alt="">
                    </li>
                </ul> -->
            </div>
        </div>
        <div class="cooperation">
            <div class="container">
                <!-- <p class="font_33">合作案列</p> -->
                <!-- <ul>
                    <li>
                        <img src="./img/u490.png" alt="">
                        <div class="count">
                            <p class="font_30">这是一段推广案例标题</p>
                            <h3 class="font_30">案例背景</h3>
                            <p class="font_20 font_black">这是一段产品推广案例示例：案例背景介绍案例背景介绍案例背景介绍案例背景介绍案例背景介绍案例背景介绍案例背景介绍案例背景介绍案例背景介绍案例背景介绍案例背景介绍。</p>
                            <h3 class="font_30">案例成果</h3>
                            <p class="font_20 font_black">这是一段产品推广案例示例：案例成果案例成果案例成果案例成果案例成果案例成果案例成果案例成果案例成果案例成果案例成果案例成果案例成果案例成果案例成果案例成果案例成果案例成果案例成果案例成果。</p>
                        </div>
                    </li>
                </ul> -->
            </div>
        </div>
    </main>
    <footer>
        <div >
           <div class="count claerFlex">
                <div class="left">
                    <img src="./img/u115.png" alt="">
                    <h3 class="margin_10 font_33 font_white">LOGO</h3>
                </div>
                <div class="center">
                    <ul>
                        <li>
                            <h3 class="font_24">关于我们
                                <ul>
                                    <li>企业文化</li>
                                    <li>企业简介</li>
                                    <li>企业历程</li>
                                </ul>
                            </h3>
                        </li>
                        <li>
                            <h3 class="font_24">企业产品
                                <ul>
                                    <li>企业产品1</li>
                                    <li>企业产品2</li>
                                </ul>
                            </h3>
                        </li>
                        <li>
                            <h3 class="font_24">解决方案
                                <ul>
                                    <li>解决方案1</li>
                                    <li>解决方案2</li>
                                </ul>
                            </h3>
                        </li>
                        <li>
                            <h3 class="font_24">其他
                                <ul>
                                    <li>客户案列</li>
                                    <li>咨询与服务</li>
                                    <li>企业与新闻</li>
                                </ul>
                            </h3>
                        </li>
                        <li>
                            <h3 class="font_24">加入我们
                                <ul>
                                    <li>校园招聘</li>
                                    <li>社会招聘</li>
                                </ul>
                            </h3>
                        </li>
                    </ul>
                </div>
                <div class="right">
                    <ul>
                        <li>
                            <h3 class="font_24">微信公众号</h3>
                            <img src="./img/u139.png" alt="">
                        </li>
                        <li>
                            <h3 class="font_24">联系我们</h3>
                            <div>
                                <p>地址：北京市XX路XXX号XXX楼</p>
                                <p>电话：010-XXXXXXXX</p>
                                <p>邮箱：XXXXXXXX@163.com</p>
                            </div>
                        </li>
                    </ul>
                </div>
           </div>
           <p class="font_20 font_white">某某科技有限公司 版权所有 &copy2021-2031</p>
        </div>
    </footer>
    <div id="mask">
        <div class="claerFlex">
            <p class="font_20 font_white">联系我们</p>
            <span id="close">
                <img src="./img/u526.png" alt="">
            </span>
            <div id="count_box" >
                <ul class="count">
                    
                </ul>
            </div>
            <form action="" method="get">
                <dl>
                    <dt class="font_17">您的姓名:</dt>
                    <dd><input type="text"></dd>
                    <dt class="font_17">联系方式:</dt>
                    <dd><input type="text"></dd>
                </dl>
                <dl>
                    <dt class="font_17">涉及产品:</dt>
                    <dd><input type="text" disabled placeholder="XXXXXXXXXXXXXX"></dd>
                </dl>
                <dl>
                    <dt class="font_17">问题描述:</dt>
                    <dd><textarea name="" id="" cols="30" rows="10"></textarea></dd>
                </dl>
                <hr>
                <dl>
                    <dt><button class="font_18">提交问题单</button></dt>
                    <dd><p>提交单据后，我们将在3个工作日内联系您。</p></dd>
                </dl>
            </form>
        </div>
    </div>
</body>
<script src="./js/ajax.js"></script>
<script>
    window.onload = ()=>{
        
    let tag_bnt = document.querySelector('.tag_btn');
    let mask = document.querySelector('#mask');
    let close_btn = document.querySelector('#mask #close');
    let count = document.querySelector('#mask #count_box');
    let table = document.querySelector('#mask form');
    let tab_box  = document.querySelector('.tab_box .tab_list');
    let tab = document.querySelector('.tab_box');
    let head = document.querySelector('header');
    let arr=  [];
    get({
        type:'GET',
        url:'/v1/programme/dail',
        success:function(res){
            if(res.code === 200){
                console.log(res);
                creaotr(res.data);
            }
        }
    })
    // let data = [
    //     {
    //         title:'行业痛点',
    //         en:'industry',
    //         msg:[
    //         {
    //                 title:'信息孤岛 运维效率低',
    //                 img:'./img/u879.png',
    //                 count:'这是一段产品优势示例：公交，地铁，铁路，空运，各个系统相互独立，信息传递及运输效率降低，信息孤岛现象严重，公交，地铁，铁路，空运，各个系统相互独立，信息传递及运输效率降低，信息孤岛现象严重。'
    //             },
    //             {
    //                 title:'设备数量庞大',
    //                 img:'./img/u881.png',
    //                 count:'这是一段产品优势示例：随着交通建设的发展，涉及的里程、站点数飞速增涨，需要管理的设备繁杂，维护成本高。'
    //             },
    //             {
    //                 title:'信息数据分散',
    //                 img:'./img/u884.png',
    //                 count:'这是一段产品优势示例：交通的系统应用多，数据分散，不能在同一个平台展示，难以基于数据实现正确决策。'
    //             },
    //             {
    //                 title:'缺乏应急联动',
    //                 img:'./img/u887.png',
    //                 count:'这是一段产品优势示例：出现告警事件时，各系统间没有形成快速联动。'
    //             }
    //         ]
    //     },
    //     {
    //         title:'方案优势',
    //         en:'advantage',
    //         msg:[
    //             {
    //                 title:'灵活部署',
    //                 img:'./img/u433.png',
    //                 count:'这是一段产品优势示例：全面适配各种底层存储计算平台，支持容器化部署，零基础半小时轻松完成全套产品部署。'
    //             },
    //             {
    //                 title:'高安全性',
    //                 img:'./img/u437.png',
    //                 count:'这是一段产品优势示例：平台部署在内网服务器上，抗外部攻击能力强。'
    //             },
    //             {
    //                 title:'算法先进',
    //                 img:'./img/u443.png',
    //                 count:'这是一段产品优势示例：1.5亿+数据样本训练，可通过网络升级算法，有效识别率达99.99%以上。'
    //             },
    //             {
    //                 title:'高稳定性',
    //                 img:'./img/u447.png',
    //                 count:'这是一段产品优势示例：7*24小时稳定运行，稳定性高达99.99%。'
    //             }
    //         ]
    //     },
    //     {
    //         title:'方案架构',
    //         en:'framework',
    //         msg:[
    //             {
    //                 img:'./img/u890.png',
    //                 count:'这是一段架构描述示例：智慧交通将是智能的立体化架构，如图所示，包括终端层、网络层平台层及应用层。终端层，即基础设施层，是智慧交通的神经末梢，实现道路的全面感知与检测，同时实现感知数据的结构化处理；网络层，是基础设施层与平台应用层连接的管道，一方面将基础设施的结构化数据上传到平台层；另一方面，根据不同的业务需求提供隔离的网络资源。平台层，是智慧交通的大脑，实现车辆、路侧感知信息的采集与融合分析，面向不同应用场景提供联合决策和协同控制，实现业务管理及应用服务。应用层，实现路况监测、编队行驶、无人驾驶等智慧交通服务。通过“端-管-云”的架构，实现地面交通在云端的数字孪生映射，利用人工智能实现快速、高效的智慧交通业务应用'
    //             },
    //         ]
    //     },
    //     {
    //         title:'合作案列',
    //         en:'cooperation',
    //         msg:[
    //             {
    //                 title:'这是一段推广案例标题',
    //                 p:'案例背景',
    //                 count:'这是一段产品推广案例示例：案例背景介绍案例背景介绍案例背景介绍案例背景介绍案例背景介绍案例背景介绍案例背景介绍案例背景介绍案例背景介绍案例背景介绍案例背景介绍。',
    //                 p2:'案例成果',
    //                 count2:'这是一段产品推广案例示例：案例成果案例成果案例成果案例成果案例成果案例成果案例成果案例成果案例成果案例成果案例成果案例成果案例成果案例成果案例成果案例成果案例成果案例成果案例成果案例成果。',
    //                 img:'./img/u490.png',
    //             }
    //         ]
    //     }
    // ];
    function creaotr(data){
        data.forEach((v,i)=>{
        let {
            title,
            en,
            msg
        }=v;
        if(i===0){
            tab_box.innerHTML+=`
            <li class="font_24 active" data-i='${en}'>${title}</li>
        `
        }else{
            tab_box.innerHTML+=`
            <li class="font_24 " data-i='${en}'>${title}</li>
        `
        }
        arr.push(en);
       
        let pNode = document.querySelector(`.${en}>div`);
        pNode.innerHTML += `
        <p class="font_33">${title}</p>
        <ul></ul>
        `
        let node = document.querySelector(`.${en} ul`);
        let str = '';
        msg.forEach((v,index)=>{
            if(i !==data.length-2 && i !==data.length-1){
                str += `
                <li>
                        <img src="${v.img}" alt="">
                        <p class="font_30">${v.title}</p>
                        <p class="font_20 font_black">${v.count}</p>
                    </li>
            `
            }else if(i === data.length-2){
                str+=`<li class="font_20 font_black">
                        <p>${v.count}</p>
                        <img src="${v.img}" alt="">
                    </li>`
            }else if(i === data.length-1){
                str += `
                <li>
                        <img src="${v.img}" alt="">
                        <div class="count">
                            <p class="font_30">${v.title}</p>
                            <h3 class="font_30">${v.p}</h3>
                            <p class="font_20 font_black">${v.count}</p>
                            <h3 class="font_30">${v.p2}</h3>
                            <p class="font_20 font_black">${v.count2}</p>
                        </div>
                    </li>
                `
            }
        })
        
        node.innerHTML = str;
      
    })
    let tab_list = document.querySelectorAll('.tab_box .tab_list li');
   
    tab_list.forEach((v,i)=>{
        v.addEventListener('click',(e)=>{
            tab_list.forEach(v=>v.classList.remove('active'));
            v.classList.add('active')
            let t = document.querySelector(`.${e.target.dataset.i}`).offsetTop;
             window.scrollTo({
                top: t-120,
                behavior:'smooth',
            })
        })
    })
    }
    let data2 = [
        {
            title:'咨询服务',
            msg:[
                {
                    img:'./img/u537.png',
                    title:'产品咨询',
                    src:'./consult.html'
                },
                {
                    img:'./img/u540.png',
                    title:'售前客服咨询',
                    src:'./service.html'
                },
            ]
        },
        {
            title:'售后服务',
            msg:[
                {
                    img:'./img/u546.png',
                    title:'问题单填报'
                },
                {
                    img:'./img/u540.png',
                    title:'售后客服咨询',
                    src:'./service.html',
                }
            ]
        },
        {
            title:'联系方式',
            msg:[
                {
                    img:'./img/u548.png',
                    text:'XXX-XXXXXXXXX'
                },
                {
                    img:'./img/u550.png',
                    text:'XXXXXX@XXX.com',
                }
            ]
        }
    ]
    
    let ul_box = count.firstElementChild;
    data2.forEach((v,i)=>{
        let {title,msg} = v;
        if(i+1 === data2.length){
            ul_box.innerHTML +=`
            <li>
                        <p class="font_20 font_bold">${title}</p>
                    </li>
            `
            msg.forEach((item,index)=>{
            ul_box.children[i].innerHTML +=`
            <div>
                            <img src="${item.img}" alt="">
                            <p class="font_17">${item.text}</p>
                        </div>
        `
        })
        }else{
            ul_box.innerHTML += `
        <li>
                        <p class="font_20 font_bold">${title}</p>
                        
                    </li>
        `
        msg.forEach((item,index)=>{
            ul_box.children[i].innerHTML +=`
        <a ${item.src?"href="+item.src :''}>
                            <img src="${item.img}" alt="">
                            <p class="font_20">${item.title}</p>
                        </a>
        `
        })
        }
    })
    
    let btns = document.querySelectorAll('#mask .count li a');
    tag_bnt.addEventListener('click',()=>{
        mask.style.display = 'block';
    })
    close_btn.addEventListener('click',()=>{
        mask.style.display = 'none';
        count.style.display = 'block';
        table.style.display = 'none'
    })
    mask.addEventListener('click',(e)=>{
        if(e.target.id !== 'mask') return;
        mask.style.display = 'none';
        count.style.display = 'block';
        table.style.display = 'none'
    })
    btns[2].addEventListener('click',()=>{
        count.style.display = 'none';
        table.style.display = 'block'
    })
    
        window.addEventListener('scroll',()=>{  
            if(window.scrollY >= 746){
                head.style.display = 'none';
                tab.classList.add('fix');
            }else{
                head.style.display = 'block';
                tab.classList.remove('fix');
            }
        })
    }
</script>
</html>